<template>
  <div
    :class="{
      'message-container-left': left,
      'message-container-right': !left,
    }"
  >
    <head-img :ID="msgData.userID"></head-img>
    <div class="name-content">
      <div class="name" v-show="nameShow">
        {{ $store.state.userList[msgData.userID].name }}
      </div>
      <div class="bubble">
        <div :class="{ 'redenv-rect': true, received: isReceived }">
          <div
            :class="{
              'redenv-tri-left': left,
              'redenv-tri-right': !left,
            }"
          ></div>
          <div class="content">
            <div class="redenv-img-close" v-show="!isReceived">
              <div class="redenv-img-money">
                <i class="iconfont icon-jinqian"></i>
              </div>
              <div class="redenv-img-circle"></div>
            </div>
            <div class="redenv-img-open" v-show="isReceived">
              <div class="container1">
                <div class="container2">
                  <div class="container3"></div>
                </div>
              </div>
              <div class="container4">
                <div class="open-money">
                  <i class="iconfont icon-jinqian"></i>
                </div>
                <div class="container5"></div>
              </div>
            </div>
            <div>
              <div style="font-weight:500">{{msgData.info}}</div>
              <div style="font-size:12px" v-show="isReceived">已领取</div>
            </div>
          </div>
          <el-divider class="hr"></el-divider>
          <div class="compo-name"><div>微信红包</div></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import HeadImg from "@/components/HeadImg";
export default {
  data() {
    return {};
  },
  components: {
    "head-img": HeadImg,
  },
  props: {
    msgData: {
      type: Object,
    },
  },
  computed: {
    left() {
      if (this.msgData.userID == 0) {
        return false;
      } else return true;
    },
    messageShow() {
      if (this.msgData.info) {
        return true;
      } else return false;
    },
    nameShow() {
      if (this.msgData.userID == 0) return false;
      if (this.$store.state.dialogueType == "single") return false;
      return true;
    },
    isReceived() {
      if (this.msgData.receiveState > 0) return true;
      return false;
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../../assets/scss/message.scss";
$name-padding: 4px;
$rgb-pure: 120;
.redenv-left {
}
.redenv-rect {
  @include asset-frame;
  background-color: rgb(249, 157, 58);
  .hr {
    background-color: rgb(255, 176, 85);
    color: rgb(255, 176, 85);
  }
}

.received {
  background-color: rgb(252, 225, 195);
  .hr {
    background-color: rgb(255, 230, 203);
  }
  .compo-name {
    color: rgb(255, 247, 236);
  }
  .redenv-tri-left {
    border-color: transparent rgb(252, 225, 195) transparent transparent;
  }
  .redenv-tri-right {
    border-color: transparent transparent transparent rgb(252, 225, 195);
  }
}
.redenv-img-close {
  width: 32px;
  height: 42px;
  border-radius: 3px;
  background-color: rgb(225, 72, 72);
  display: flex;
  flex-shrink: 0;
  position: relative;
  justify-content: center;
  overflow: hidden;
  margin-left: 8px;
  margin-right: 18px;
  .redenv-img-circle {
    width: 90px;
    height: 90px;
    border-radius: 45px;
    flex-shrink: 0;
    top: -70px;
    position: absolute;
    background-color: rgb(250, 80, 80);
  }
  .redenv-img-money {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: rgb(255, 207, 52);
    top: 15px;
    position: absolute;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    i {
      font-size: 15px;
      color: rgb(223, 139, 49);
    }
  }
}
.redenv-img-open {
  width: 32px;
  height: 42px;
  margin-left: 8px;
  margin-right: 18px;
  .container1 {
    overflow: hidden;
    height: 12px;
    .container2 {
      width: 100%;
      height: 15px;
      position: relative;
      background-color: rgb(255, 243, 231);
      margin-top: 20px;
      display: flex;
      justify-content: center;
      .container3 {
        width: 80px;
        height: 80px;
        border-radius: 40px;
        position: absolute;
        top: -20px;
        background-color: rgb(255, 243, 231);
      }
    }
  }
  .container4 {
    width: 100%;
    height: 30px;
    border-radius: 0px 0px 3px 3px;
    position: relative;
    background-color: rgb(251, 154, 138);
    display: flex;
    justify-content: center;
    overflow: hidden;
    .container5 {
      width: 80px;
      height: 80px;
      border-radius: 40px;
      position: absolute;
      top: -75px;
      background-color: rgb(255, 243, 231);
    }
    .open-money {
      width: 10px;
      height: 10px;
      border-radius: 5px;
      background-color: rgb(247, 212, 154);
      position: absolute;
      top: 7px;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      i {
        font-size: 15px;
        color: rgb(238, 177, 112);
      }
    }
  }
}
.redenv-tri-left {
  @include triangle;
  border-color: transparent rgb(249, 157, 58) transparent transparent;
  left: $triangle-size;
}
.redenv-tri-right {
  @include triangle;
  border-color: transparent transparent transparent rgb(249, 157, 58);
  right: $triangle-size;
}
</style>